<template>
	<view>
		<radio-group  @change="radioOnChange" >
		<view class="cu-form-group">
			<view  class="zh-picker" :style="{'justify-content':justifyContent}" >
			<view v-if="iconClass||label" class="title" :style="{'width':labelWidth,'text-align':labelAlign}">
				<text v-if="required" class="text-red " style="padding-right: 4rpx;" :style="{'font-size':fontSize}">*</text>
				<text v-if="iconClass" :class="iconClass?iconClass:''" style="padding-right: 6rpx;" :style="{'font-size':fontSize}"></text>
				<text v-if="label" :style="{'font-size':fontSize}">{{ label }}</text>
			</view>
			
			<view >
				<view style="display: flex;align-items: center;justify-content: space-between;vertical-align:middle;">
				<view style="display: flex;align-items: center;justify-content: flex-start;vertical-align:middle;padding-left: 20rpx;" v-for="(item,index) in options" :key="index">
					<radio class="radio" :disabled="disabled" :class="[checkedValue==item.dictKey?'checked':'',colorClass]" :checked="checkedValue==item.dictKey?true:false" :value="item.dictKey"></radio>
					<view style="padding-left: 10rpx;" :style="{'font-size':fontSize}">{{item.dictValue}}</view>
				</view>
				</view>
			</view>
			</view>
		</view>
		</radio-group>
	</view>
</template>

<script>
	export default {
		name: 'zh-radio',
		props:{
			iconClass: {
				type:[Array, String],
				default(){
					return ''
				}
			},
			colorClass:{
				type:String,
				default:'blue'
			},
			required: Boolean,
			label:String,
			fontSize: {
				type: String,
				default: '28rpx'
			},
			value: {
				type: String,
				default: ''
			},
			justifyContent:{
				type:String,
				default:"flex-start"
			},
			// 左边标题的宽度单位rpx
			labelWidth: {
				type: [Number, String],
				default: 'auto'
			},
			// 标题对齐方式，left|center|right
			labelAlign: {
				type: String,
				default: 'right'
			},
			
			disabled: {
				type: Boolean,
				default: false
			},
			options:{//selector,region数据源
				type:[Array,Object],
				default(){
					return []
				}
			},
		},
		onReady() {
			this.checkedValue=this.value
		},
		data() {
			return {
				checkedValue:''
			}
		},
		methods: {
			radioOnChange(evt){
				for (let i = 0; i < this.options.length; i++) {
				    if (this.options[i].dictKey=== evt.target.value) {
				        this.checkedValue = evt.target.value
						let data={}
						data.value=this.options[i].dictKey
						data.label=this.options[i].dictValue
						this.$emit('radioChange', data);
				        break
				    }
				}
			}
		}
	}
</script>

<style>

</style>
